<template>
  <div class="global">
    <div class="head" v-if="header">
      <router-link to="/Failure" class="position">
        <img src="../assets/img/ic_local.png" alt class="local">
        <p>玛琪雅朵漫妙屋超市</p>
        <img src="../assets/img/店铺切换下拉-icon.png" alt class="icon">
      </router-link>
      <button>我要卖货</button>
    </div>
    <div class="head" v-else>
      <div class="container">
        <input type="text" placeholder="搜索商品">
        <img src="../assets/img/ic_search_gary.png" alt>
      </div>
    </div>
    <div class="center" @scroll="handleScroll">
      <div class="shuffling">
        <mt-swipe :auto="4000">
          <mt-swipe-item><img src="../assets/img/lunbo2.png" alt=""></mt-swipe-item>
          <mt-swipe-item><img src="../assets/img/lunbo3.png" alt=""></mt-swipe-item>
          <mt-swipe-item><img src="../assets/img/lunbo4.png" alt=""></mt-swipe-item>
        </mt-swipe>
        <div class="container">
          <input type="text" placeholder="搜索商品">
          <img src="../assets/img/ic_search_gary.png" alt>
        </div>
        <ul class="frame">
          <li>
            <img src="../assets/img/常购清单.png" alt>
            <p>常购清单</p>
          </li>
          <li>
            <img src="../assets/img/领劵中心.png" alt>
            <p>领券中心</p>
          </li>
          <li>
            <img src="../assets/img/我的订单.png" alt>
            <p>我的订单</p>
          </li>
          <li>
            <img src="../assets/img/我的供应商.png" alt>
            <p>我的供应商</p>
          </li>
        </ul>
      </div>
      <div class="statement">
        <img src="../assets/img/icon_horn.png" alt>
        <marquee>新增《营销工具“拼团”玩法使用说明》内容详情向蜂网头条</marquee>
      </div>
      <div class="cycle">
        <div class="cycle-one" v-for="(item,index) in b2bFloorVoList" :key="index" v-if="b2bFloorVoList.length>0">
          <div class="recommend">
            <img src="../assets/img/ic_left_red.png" alt>
            <span>{{item.name}}</span>
            <img src="../assets/img/ic_right_red.png" alt>
          </div>
           <mt-swipe style="height:1.20rem" v-if="item.b2bFloorBannerList.length>0">
              <mt-swipe-item>
                <img :src="item.b2bFloorBannerList[0].picUrl" style="height:1.20rem;width:100%">
              </mt-swipe-item>
          </mt-swipe>
          <ul>
            <li v-for="(v,i) in item.goodsListRecommendLocationsList" :key="i">
              <img :src="v.picsUrl">
              <div style="width:1.14rem">
                <span class="span1">{{v.goodsName}}</span>
                <span class="span2">{{v.dealerName}}</span>
                <span class="span3">
                  ￥{{v.orderPrice}}
                   <car-ta :stuid="v.skuId"></car-ta>
                </span>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="following">
        <p>喜宴用水</p>
        <p>健康用水</p>
        <p>新品发布会</p>
        <img class="go-top" src="../assets/img/Group.png" id="group">
      </div>
      <div class="gray"></div>
    </div>
  </div>
</template>

<script>
import Footer from "../components/Footer";
import axios from "axios";
import { Swipe, SwipeItem } from "mint-ui";
import { shouye,fenlei,pinpai,alert} from "../api/api.js";
import CarTa from "./CarTa"
export default {
  name: "center",
  data() {
    return {
      b2bAdvList: [],
      b2bFloorVoList: [],
      month: true,
      header: true,
      msg:false
    };
  },
   components:{ 
     CarTa
   },
  methods: {
    handleScroll(event) {
      this.house = event.target.scrollTop;
      if (this.house < 902) {
        var group = document.getElementById("group");
        group.onclick = function() {
          event.target.scrollTop = 0;
        };
      }
      if (event.target.scrollTop > 100) {
        this.month = true;
        this.header = false;
      } else if(event.target.scrollTop == 0){
        this.month = false;
        this.header = true;
      }
    },
    findfenlei() {
      if (this.$store.state.token) {
        return fenlei(this.$store.state.myresule.stationId).then(res => {
          console.log("分类aa:", res);
         this.$store.commit("set_fenleiresule", res.data.result.list);
          return res;
        });
      }else{
         return fenlei(22).then(res => {
           console.log("分类aa:", res);
           this.$store.commit("set_fenleiresule", res.data.result.list);
           return res;
         })
      }
    }
  },
  created() {
    if (this.$store.state.token) {
      shouye({
        merchantId: this.$store.state.myresule.merchantId,
        siteid: this.$store.state.myresule.stationId,
        storeCustId: this.$store.state.storeCustId,
        terminal: 3,
        storeId: this.$store.state.storeId
      })
        .then(res => {
          console.log("登录后", res);
          this.b2bAdvList = res.data.result.b2bAdvList;
          this.b2bFloorVoList = res.data.result.b2bFloorVoList;
          return res;
        })
        .then(res => {
          console.log("分类", res);
          return this.findfenlei();
        });
    } else {
      shouye({
        merchantId: 0,
        siteid: 22,
        storeCustId: 0,
        terminal: 3,
        storeId: 0
      }).then(res => {
        console.log(res);
        this.b2bAdvList = res.data.result.b2bAdvList;
        this.b2bFloorVoList = res.data.result.b2bFloorVoList;
         return this.findfenlei();
      });
    }
  }
};
</script>


<style scoped lang="scss">
.global {
  // width: 100%;
  // height: 100%;
  display: flex;
  flex-direction: column;
  overflow: scroll;
  .head {
    background: #dd3333;
    height: 0.435rem;
    display: flex;
    align-items: center;
    flex-direction: row;
    font-size: 0.18rem;
    color: #030303;
    position: relative;
    .position{
      display:flex;
      text-decoration:none;
        .local {
              width: 0.15rem;
              height: 0.15rem;
              position: absolute;
              left: 0.14rem;
              top: 58%;
              margin-top: -0.1rem;
            }
            .icon {
              width: 0.06rem;
              height: 0.06rem;
              margin: 0.06rem 0 0 0.08rem;
            }
            p {
              padding-left: 0.35rem;
              font-family: PingFangSC-Regular;
              font-size: 0.16rem;
              color: #ffffff;
              letter-spacing: -0.00036rem;
              line-height: 0.16rem;
            }
    }  
    button {
      width: 0.77rem;
      height: 0.24rem;
      background: #dd3333;
      color: #ffffff;
      text-align: center;
      outline: none;
      border: 1px solid white;
      border-radius: 0.25rem;
      margin: 0 0 0 0.9rem;
    }
    &::after {
      position: absolute;
      content: "";
      bottom: 0;
      left: 0;
      height: 1px;
      width: 100%;
      background: #e4e4e4;
      transform: scale(1, 0.5);
    }
    .container {
      width: 3.47rem;
      height: 0.32rem;
      position: absolute;
      top: 0.08rem;
      left: 0.12rem;
      input {
        position: relative;
        width: 3.47rem;
        height: 0.32rem;
        opacity: 0.9;
        background: #ffffff;
        border: 0;
        outline: none;
        box-sizing: border-box;
        border-radius: 0.37rem;
        text-indent: 0.3rem;
        font-family: PingFangSC-Regular;
        font-size: 0.14rem;
        color: #999999;
        letter-spacing: -0.0041rem;
        line-height: 0.14rem;
      }
      img {
        width: 0.13rem;
        height: 0.13rem;
        position: absolute;
        top: -0.25rem;
        left: 0.1rem;
        position: relative;
      }
    }
  }
  .center {
    //  width: 100%;
    overflow: auto;
    flex: 1;
    background: #f8f8f8;
    margin-bottom: 0.5rem;
    .shuffling {
      width: 100%;
      height: 2.09rem;
      position: relative;
      top: 0;
      left: 0;
      img {
        width: 100%;
        height: 2.09rem;
      }
    }
    .container {
      width: 3.47rem;
      height: 0.32rem;
      position: absolute;
      top: 0.08rem;
      left: 0.12rem;
      input {
        position: relative;
        width: 3.47rem;
        height: 0.32rem;
        opacity: 0.9;
        background: #ffffff;
        border: 0;
        outline: none;
        box-sizing: border-box;
        border-radius: 0.37rem;
        text-indent: 0.3rem;
        font-family: PingFangSC-Regular;
        font-size: 0.14rem;
        color: #999999;
        letter-spacing: -0.0041rem;
        line-height: 0.14rem;
      }
      img {
        width: 0.13rem;
        height: 0.13rem;
        position: absolute;
        top: -0.21rem;
        left: 0.1rem;
        position: relative;
      }
    }
    .frame {
      width: 94.7%;
      height: 1.01rem;
      margin:0 auto;
      // border:1px solid blue;
      position: absolute;
      top: 1.8rem;
      left: 0.1rem;
      background: rgba(255, 255, 255, 0.95);
      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
      border-radius: 4px;
      box-sizing: border-box;
      display: flex;
      justify-content: space-around;
      align-items: center;
      li {
        flex-direction: row;
        text-align: center;
        flex-grow: 1;
        justify-content: center;
      }
      img {
        width: 0.4rem;
        height: 0.4rem;
      }
      p {
        font-family: PingFangSC-Regular;
        font-size: 0.12rem;
        color: #333333;
        letter-spacing: 0;
        line-height: 0.12rem;
        padding-top: 0.05rem;
      }
    }
    .statement {
      width:100%;
      height: 0.4rem;
      margin-top: 0.82rem;
      background: #ffffff;
      display: flex;
      align-items: center;
      flex-direction: row;
      img {
        width: 0.14rem;
        height: 0.14rem;
        margin: 0 0.08rem 0 0.1rem;
      }
      marquee {
        font-family: PingFangSC-Regular;
        font-size: 0.12rem;
        color: #333333;
        letter-spacing: -0.2px;
        line-height: 0.12rem;
      }
    }
    .recommend {
      width: 100%;
      height: 0.4rem;
      background: #f8f8f8;
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        width: 0.35rem;
        height: 0.2rem;
      }
      span {
        font-size: 0.14rem;
        color: #fd6f17;
        letter-spacing: -0.24px;
        font-weight: bold;
      }
      .color {
        color: #28b60e;
      }
      .c {
        color: #ed0c0d;
      }
    }
    .cycle {
      .cycle-one {
        width: 100%;
      }
      ul {
        display: flex;
        overflow: scroll;
        background:white;
        li {
          min-width: 1.34rem;
          max-width: 1.34rem;
          height: 1.99rem;
          border: 0.01rem solid #cccccc;
          margin-left: 0.14rem;
          margin-top: 0.1rem;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: content;
          img {
            width: 1.14rem;
            height: 1.14rem;
            margin-bottom: 0.1rem;
          }
          span {
            font-size: 0.14rem;
            white-space: nowrap;
            text-overflow: ellipsis;
            display: block;
            overflow: hidden;
            img {
              width: 0.15rem;
              height: 0.15rem;
            }
          }
          .span1 {
            font-family: PingFangSC-Regular;
            font-size: 12px;
            color: #333333;
            letter-spacing: -0.29px;
            line-height: 12px;
            display: block;
            margin-bottom: 0.1rem;
          }
          .span2 {
            font-family: PingFangSC-Regular;
            font-size: 9px;
            color: #999999;
            letter-spacing: -0.22px;
            line-height: 9px;
            margin-bottom: 0.15rem;
            margin-bottom: 0.1rem;
            display: block;
          }
          .span3 {
            display: flex;
            justify-content: space-between;
            font-family: PingFangSC-Regular;
            font-size: 18px;
            color: #dd3333;
            letter-spacing: -0.43px;
            line-height: 18px;
          }
        }
      }
    }
    .following {
      height: 0.45rem;
      background-color: #ffffff;
      display: flex;
      position: relative;
      p {
        font-family: PingFangSC-Regular;
        font-size: 0.12rem;
        color: #666666;
        letter-spacing: -0.29px;
        line-height: 0.2rem;
        text-align: center;
      }
      p:nth-of-type(1) {
        width: 0.69rem;
        height: 0.2rem;
        border: 1px solid #cccccc;
        margin: 0.12rem 0 0 0.1rem;
        border-radius: 0.12rem;
      }
      p:nth-of-type(2) {
        width: 0.68rem;
        height: 0.2rem;
        border: 1px solid #cccccc;
        border-radius: 0.12rem;
        margin: 0.12rem 0 0 0.12rem;
      }
      p:nth-of-type(3) {
        width: 0.8rem;
        height: 0.2rem;
        border: 1px solid #cccccc;
        border-radius: 0.12rem;
        margin: 0.12rem 0 0 0.12rem;
      }
      img {
        width: 0.5rem;
        height: 0.5rem;
        position: absolute;
        top: -0.09rem;
        left: 3rem;
      }
    }
    .gray {
      height: 0.2rem;
      background-color: rgb(235, 229, 229);
    }
  }
}
</style>

